<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>游玩</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
		<style type="text/css">
			.list-block{margin: 0;}
			.list-block .item-text{line-height: 2.1rem;}
		</style>
  </head>
  <body>
  	<div class="page-group">
			<div class="page">
				<header class="bar bar-nav">
				  <a class="button button-link button-nav pull-left back" >
				  	<span class="icon icon-left"></span>
				    返回
				  </a>
				  <a class="pull-right " href="setting.html">
            <span class="icon icon-settings"></span>
          </a>
          <a class="button-link pull-right open-about" data-popup=".popup-about" href="#">
	            <span class="icon icon-message"></span>
	          </a>
				  <h1 class="title">我的</h1>
				</header>
				
				<div class="content">
					
					<div class="list-block media-list">
				    <ul>
				      <li>
				        <a href="#" class="item-content">
				          <div class="item-media"><img src="../img/txc.jpg" style='width: 4rem;'></div>
				          <div class="item-inner">
				            <div class="item-title-row">
				              <div class="item-title">O(∩_∩)O哈哈~</div>
				            </div>
				            <div class="item-subtitle">
				            	<span class="badge">小可爱</span>
				            	<span class="badge">蛋糕</span>
				            	<span class="badge">小熊饼干</span>
				            </div>
				            <div class="item-text">如果可以，我想和你一起走……</div>
				          </div>
				        </a>
				      </li>
				    </ul>
				  </div>
				  
				  
				  <!---->
				  <div class="list-block contacts-block">
					    <div class="list-group">
					      <ul>
					        <li class="list-group-title">A</li>
					        <li>
					          <div class="item-content">
					            <div class="item-inner">
					              <div class="item-title">Anna</div>
					            </div>
					          </div>
					        </li>
					        <li>
					          <div class="item-content">
					            <div class="item-inner">
					              <div class="item-title">Ana</div>
					            </div>
					          </div>
					        </li>
					      </ul>
					    </div>
					    
					    <div class="list-group">
					      <ul>
					        <li class="list-group-title">B</li>
					        <li>
					          <div class="item-content">
					            <div class="item-inner">
					              <div class="item-title">Banana</div>
					            </div>
					          </div>
					        </li>
					        <li>
					          <div class="item-content">
					            <div class="item-inner">
					              <div class="item-title">Bring</div>
					            </div>
					          </div>
					        </li>
					      </ul>
					    </div>
					    
					</div>
					<!---->
					
				</div>
				
				
			</div>
		</div>
		
		<!--popup-->
		<div class="popup popup-about" style="position: fixed; margin-top: 7.6rem;">
		  <div class="content-block">
		  	<header class="bar bar-nav">
				  <h1 class="title">添加好友</h1>
				</header>
				<div class="content">
			  	<div class="list-block">
				    <ul>
				      <li>
				        <div class="item-content">
				          <div class="item-media"><i class="icon icon-card"></i></div>
				          <div class="item-inner">
				            <div class="item-title label">姓名</div>
				            <div class="item-input">
				              <input type="text" placeholder="Your name">
				            </div>
				          </div>
				        </div>
				      </li>
				      
				      <li>
				        <div class="item-content">
				          <div class="item-media"><i class="icon icon-phone"></i></div>
				          <div class="item-inner">
				            <div class="item-title label">电话</div>
				            <div class="item-input">
				              <input type="tel" placeholder="" maxlength="11">
				            </div>
				          </div>
				        </div>
				      </li>
				      
				      <li class="align-top">
				        <div class="item-content">
				          <div class="item-media"><i class="icon icon-home"></i></div>
				          <div class="item-inner">
				            <div class="item-title label">住址</div>
				            <div class="item-input">
				              <textarea></textarea>
				            </div>
				          </div>
				        </div>
				      </li>
				     </ul>
			  	</div>
			  	
			  	<div class="content-block">
				    <div class="row">
				      <div class="col-50"><a href="#" class="button button-big button-fill button-danger close-popup">取消</a></div>
				      <div class="col-50"><a href="#" class="button button-big button-fill button-success">提交</a></div>
				    </div>
				  </div>
		  	</div>
		  	
		  </div>
		</div>
    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
    <script type="text/javascript">
			$(document).ready(function () {
        $.init();
      });
      $(document).on('click','.open-about', function () {
			  $.popup('.popup-about');
			});
		</script>
  </body>
</html>
